<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>服务器监控数据可视化平台</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<script type="text/javascript">
    $(document).ready(function () {
        var html = $(".wrap ul").html()
        $(".wrap ul").append(html)
        var ls = $(".wrap li").length / 2 + 1
        i = 0
        ref = setInterval(function () {
            i++
            if (i == ls) {
                i = 1
                $(".wrap ul").css({ marginTop: 0 })
                $(".wrap ul").animate({ marginTop: -'.52' * i + 'rem' }, 1000)
            }
            $(".wrap ul").animate({ marginTop: -'.52' * i + 'rem' }, 1000)
        }, 2400);
        var html2 = $(".adduser ul").html()
        $(".adduser ul").append(html2)
        var ls2 = $(".adduser li").length / 2 + 1
        a = 0
        ref = setInterval(function () {
            a++
            if (a == ls2) {
                a = 1
                $(".adduser ul").css({ marginTop: 0 })
                $(".adduser ul").animate({ marginTop: -'.5' * a + 'rem' }, 800)
            }
            $(".adduser ul").animate({ marginTop: -'.5' * a + 'rem' }, 800)
        }, 4300);
    })
</script>

<body>
    <div class="loading">
        <div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
        <h1>
            <!-- <img src="picture/logo.png"> -->
            服务器监控数据可视化平台
        </h1>
        <div class="weather"><img src="picture/weather.png"><span>多云转小雨</span><span>2022-12-30</span></div>
    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 2.7rem">
                    <div class="alltitle">资源使用量</div>

                    <div class="sycm">
                        <ul class="clearfix">
                            <li>
                                <h2 class="d5">1</h2><span>物理核心</span>
                            </li>
                            <li>
                                <h2 class="d2">1806MB</h2><span>内存总量</span>
                            </li>
                            <li>
                                <h2 class="d1">56GB</h2><span>磁盘总量</span>
                            </li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        <ul class="clearfix">
                            <li>
                                <h2 class="d6">2</h2><span>逻辑核心</span>
                            </li>
                            <li>
                                <h2 class="d4">860MB</h2><span>内存使用</span>
                            </li>
                            <li>
                                <h2 class="d3">32GB</h2><span>磁盘使用</span>
                            </li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 2.65rem">
                    <div class="alltitle">平均负载</div>
                    <div class="sy" id="echarts1"></div>
                    <div class="sy" id="echarts2"></div>
                    <div class="sy" id="echarts3"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 2.95rem">
                    <div class="alltitle">行业区分比例</div>
                    <div id="echarts4" style="height: 2.2rem; width: 100%;"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="bar">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter-cpu">00.00%</li>
                            <li class="pulll_left counter-mem">00.00%</li>
                        </ul>
                    </div>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">CPU使用率</li>
                            <li class="pulll_left">内存使用率</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="map1"><img src="picture/lbx.png"></div>
                    <div class="map2"><img src="picture/jt.png"></div>
                    <div class="map3"><img src="picture/map.png"></div>
                    <div class="map4" id="map_1"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:5.2rem">
                    <div class="alltitle">资源使用率</div>
                    <div class="tabs" style="display: none;">
                        <ul class="clearfix">
                            <li><a class="active" href="#">7天</a></li>
                            <li><a href="#">15天</a></li>
                            <li><a href="#">30天</a></li>
                        </ul>
                    </div>
                    <div class="clearfix">
                        <div class="sy" id="echarts6"></div>
                        <div class="sy" id="echarts7"></div>
                        <div class="sy" id="echarts8"></div>
                    </div>
                    <div class="addnew">
                        <div class="tit02"><span>服务器系统信息</span></div>
                        <div class="adduser">
                            <ul class="clearfix">
                                <li class="clearfix"> <span class="pulll_left"><img
                                            src="picture/head.jpg">OS</span> <span class="pulll_right">Windows10</span> </li>
                                <li class="clearfix"> <span class="pulll_left"><img
                                            src="picture/head.jpg">Go版本</span> <span class="pulll_right">1.18.1</span> </li>
                                <li class="clearfix"> <span class="pulll_left"><img
                                            src="picture/head.jpg">Xgo版本</span> <span class="pulll_right">v1.0.11</span> </li>
                                <li class="clearfix"> <span class="pulll_left"><img
                                            src="picture/head.jpg">启动时间</span> <span class="pulll_right">2022-10-10 12:00:00</span> </li>
                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.4rem">
                    <div class="alltitle">登录IP地址</div>
                    <div class="wrap">
                        <ul>
                            <li>
                                <p>2409:8a6a:8631:b330:ece3:fe4e:24b6:702f</p>
                            </li>
                            <li>
                                <p>2409:8a6a:8631:b330:7537:72a0:e95d:37b6</p>
                            </li>
                            <li>
                                <p>240e:338:238:d420:2948:fba4:10d6:ab42</p>
                            </li>
                            <li>
                                <p>2409:896a:b103:7fb:51d:a9a4:6f63:eda9</p>
                            </li>
                            <li>
                                <p>240e:438:b020:ede4:7998:85c8:83e7:c789</p>
                            </li>
                            <li>
                                <p>2001:250:2c06:9515::1:c86b</p>
                            </li>
                            <li>
                                <p>2409:896a:b060:1c61:e4a5:138e:c04:fe7a</p>
                            </li>
                            <li>
                                <p>2408:826a:b011:23ab:38a1:f57f:ae69:147d</p>
                            </li>
                            <li>
                                <p>2408:846a:b100:e0b:4150:c13:c5b8:93f2</p>
                            </li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="back"></div>
    <script language="JavaScript" src="js/js.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/area_echarts.js"></script>
    <script type="text/javascript">
function data(){
    var url = "http://web.comeround.cn:12345/jiankong";
    // url = "http://127.0.0.1:12345/jiankong";
    $.get(url,function(res){
        // CPU使用率计算
        let cpuT = 0;
        $.each(res.cpu.list,function(index,item){
            cpuT += item;
        });
        let cpuR = (cpuT / res.cpu.list.length).toFixed(2);
        $(".counter-cpu").text(cpuR+"%");
        $(".counter-mem").text(res.mem.usedPercent+"%");
        $(".d1").text(res.disk.totalMB+"GB");
        $(".d2").text(res.mem.totalMB+"MB");
        $(".d3").text(res.disk.usedMB+"GB");
        $(".d4").text(res.mem.usedMB+"MB");
        $(".d5").text(res.cpu.cores);
        $(".d6").text(res.osinfo.numCpu);
        var v1 = res.cpu.load1;
        var v2 = res.cpu.load5;
        var v3 = res.cpu.load15;
        var r1 = (100*v1/res.cpu.cores).toFixed(2);if(r1>100) r1 = 100;
        var r2 = (100*v2/res.cpu.cores).toFixed(2);if(r2>100) r2 = 100;
        var r3 = (100*v3/res.cpu.cores).toFixed(2);if(r3>100) r3 = 100;
        // 右侧
        var myChart6 = echarts.init(document.getElementById('echarts6'));
        option6 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#0088cc',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: cpuR,
                    name: 'CPU信息',
                    label: {
                        normal: {
                            formatter: cpuR + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                },
                {
                    value: 100 - cpuR,
                    name: 'CPU信息',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + cpuR + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]

        };

        var myChart7 = echarts.init(document.getElementById('echarts7'));
        option7 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#fccb00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: res.mem.usedPercent,
                    name: '内存信息',
                    label: {
                        normal: {
                            formatter: res.mem.usedMB + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                },
                {
                    value: 100-res.mem.usedPercent,
                    name: '内存信息',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + res.mem.usedPercent + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };


        var myChart8 = echarts.init(document.getElementById('echarts8'));
        option8 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#62b62f',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: res.disk.usedPercent,
                    name: '磁盘信息',
                    label: {
                        normal: {
                            formatter: res.disk.usedMB + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: 100 - res.disk.usedPercent,
                    name: '磁盘信息',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + res.disk.usedPercent + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        setTimeout(function () {
            myChart6.setOption(option6);
            myChart7.setOption(option7);
            myChart8.setOption(option8);
        }, 500);

        var myChart1 = echarts.init(document.getElementById('echarts1'));
        option1 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#f55f25',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: r1,
                    name: '1分钟负载',
                    label: {
                        normal: {
                            formatter: v1 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: 100 - r1,
                    name: '1分钟负载',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + r1 + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        var myChart2 = echarts.init(document.getElementById('echarts2'));
        option2 = {
            //animation: false,
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#fccb00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: r2,
                    name: '5分钟负载',
                    label: {
                        normal: {
                            formatter: v2 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: 100 - r2,
                    name: '5分钟负载',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + r2 + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        var myChart3 = echarts.init(document.getElementById('echarts3'));
        option3 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#62b62f',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: r2,
                    name: '15分钟负载',
                    label: {
                        normal: {
                            formatter: v3 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: 100 - r3,
                    name: '15分钟负载',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + r3 + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        setTimeout(function () {
            myChart1.setOption(option1);
            myChart2.setOption(option2);
            myChart3.setOption(option3);
        }, 500);

        var myChart = echarts.init(document.getElementById('echarts4'));
        var plantCap = [{
            name: '工业',
            value: '222'
        }, {
            name: '农业',
            value: '115'
        }, {
            name: '互联网',
            value: '113'
        }, {
            name: '医疗',
            value: '95'
        }, {
            name: '文学',
            value: '92'
        }, {
            name: '服装',
            value: '87'
        }];
        var datalist = [{
            offset: [56, 48],
            symbolSize: 110,
            // opacity: .95,
            color: 'rgba(73,188,247,.14)',

        }, {

            offset: [30, 70],
            symbolSize: 70,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [0, 43],
            symbolSize: 60,
            color: 'rgba(73,188,247,.14)'

        }, {
            offset: [93, 30],
            symbolSize: 70,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [26, 19],
            symbolSize: 65,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [75, 75],
            symbolSize: 60,
            color: 'rgba(73,188,247,.14)'

        }];

        var datas = [];
        for (var i = 0; i < plantCap.length; i++) {
            var item = plantCap[i];
            var itemToStyle = datalist[i];
            datas.push({
                name: item.value + '\n' + item.name,
                value: itemToStyle.offset,
                symbolSize: itemToStyle.symbolSize,
                label: {
                    normal: {
                        textStyle: {
                            fontSize: 14
                        }
                    }
                },

                itemStyle: {
                    normal: {
                        color: itemToStyle.color,
                        opacity: itemToStyle.opacity
                    }
                },
            })
        }
        option = {
            grid: {
                show: false,
                top: 10,
                bottom: 10
            },

            xAxis: [{
                gridIndex: 0,
                type: 'value',
                show: false,
                min: 0,
                max: 100,
                nameLocation: 'middle',
                nameGap: 5
            }],

            yAxis: [{
                gridIndex: 0,
                min: 0,
                show: false,
                max: 100,
                nameLocation: 'middle',
                nameGap: 30
            }],
            series: [{
                type: 'scatter',
                symbol: 'circle',
                symbolSize: 120,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}',
                        color: '#FFF',
                        textStyle: {
                            fontSize: '30'
                        }
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#F30'
                    }
                },
                data: datas
            }]

        };
        myChart.setOption(option);
        $(document).ready(function () {
            myChart.resize();

        })
        window.addEventListener("resize", function () {
            myChart.resize();
        });
        
        $(document).ready(function(){
            myChart1.resize();
            myChart2.resize();
            myChart3.resize();
            myChart6.resize();
            myChart7.resize();
            myChart8.resize();
        });
        window.addEventListener("resize", function () {
            myChart1.resize();
            myChart2.resize();
            myChart3.resize();
            myChart6.resize();
            myChart7.resize();
            myChart8.resize();
        });
    });
}
data();
setInterval(function (){
    data();
},3000);
</script>
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
<script type="text/javascript">
    // $('.counter').countUp();
</script>
</body>

</html>